<template>
	<div>
		<div v-if="Object.keys(teamAgent).length > 0">
			<RateTable
				:agentInfo="teamAgent"
				@back="handleBack"
				:columns="[...oriColumns(), actionColumn]"
			/>
		</div>
		<div class="breadcrumb" v-if="Object.keys(teamAgent).length > 0">
			<span>
				当前层级：
			</span>
			<template v-if="subAgents.length > 0">
				<div
					class="subAgents"
					v-for="(agent, index) in subAgents"
					:key="agent.id"
				>
					<el-link @click="handleBack(agent, index)" type="primary">
						{{ agent.userName }}{{ index === 0 ? '的团队' : '' }}
					</el-link>

					<span v-if="index < subAgents.length - 1">
						>
					</span>
				</div>
			</template>
		</div>
		<TableContainer
			:columns="columns()"
			v-bind="tableProps"
			:tableHeight="tableHeight"
		/>
		<RebateDialog
			v-if="rebateDialog.visible"
			:isEdit="rebateDialog.isEdit"
			:visible.sync="rebateDialog.visible"
			:teamAgent="teamAgent"
			:row="rebateDialog.row"
			:refresh="refresh"
		/>
		<ExpiredLogs
			v-if="expiredLogs.visible"
			:visible.sync="expiredLogs.visible"
			:row="expiredLogs.row"
		/>
	</div>
</template>
<script>
import TableContainer, {
	manager,
	initTableProps,
	TableColumns
} from '@/components/TableContainer'
import RateTable from '../rateTable'
import ExpiredLogs from '../expiredLogs'
import list from '@/mixins/list'
import RebateDialog from '../rebateDialog'
import { columns as oriColumns } from '../columns'

export default {
	name: 'Table',
	components: {
		TableContainer,
		RateTable,
		RebateDialog,
		ExpiredLogs
	},
	mixins: [list],
	props: {
		formatParams: {
			type: Function,
			default: null
		},
		searchFormValues: {
			type: Object,
			default: null
		},
		tableHeight: {
			type: String | Number,
			default: 480
		}
	},
	data() {
		return {
			showSubType: 0, // 0显示团队，1显示下级，2显示会员,
			subAgents: [],
			teamAgent: {},
			// 当前选中编辑的行
			activeRow: {},
			oriColumns: oriColumns,
			rebateDialog: {
				visible: false,
				userType: 0,
				row: {}
			},
			expiredLogs: {
				visible: false,
				row: {}
			},
			isMember: false,
			actionColumn: TableColumns.actions({
				minWidth: 290,
				fixed: 'right',
				btns: [
					{
						text: '查看下级',
						isShow: ({ row }) => {
							return (
								row.userType === 1 &&
								!row.isRateTable &&
								this.hasPermission('90870175')
							)
						},
						onClick: ({ row }) => {
							row['showSubType'] = 1
							row['showUserType'] = 1
							this.handleViewAgent(row)
						}
					},
					{
						text: `查看会员`,
						isShow: ({ row }) =>
							row.userType === 1 &&
							this.hasPermission('90870176'),
						onClick: ({ row }) => {
							row['showSubType'] = 2
							row['showUserType'] = 0

							if (row.isRateTable) {
								this.subAgents = []
							}
							this.handleViewVip(row)
						}
					},
					// 会员修改
					{
						text: '修改',
						isShow: ({ row }) =>
							row.userType === 0 &&
							this.hasPermission('90870177'),
						disabled: ({ row }) => {
							return [2, 3].includes(row.status)
						},
						onClick: ({ row }) => {
							this.handleRebateEdit(row)
						}
					},
					// 代理修改
					{
						text: '修改',
						isShow: ({ row }) => {
							return (
								row.userType === 1 &&
								!row.isRateTable &&
								this.hasPermission('90870177')
							)
						},
						disabled: ({ row }) => {
							return (
								row.proxyLevel > 0 ||
								[2, 3].includes(row.status)
							)
						},
						onClick: ({ row }) => {
							this.handleRebateEdit(row)
						}
					},
					{
						text: '失效记录',
						isShow: () => {
							return this.hasPermission('90870178')
						},
						disabled: ({ row }) => {
							return row.status === 2
						},
						isShow: () => {
							return this.hasPermission('90870178')
						},
						onClick: ({ row }) => {
							this.handleCheckExpiredLogs(row)
						}
					}
				]
			}),
			columns: () => [
				...oriColumns(this.listQueryParams.userType === 0),
				this.actionColumn
			],
			tableProps: initTableProps(),
			listQueryParams: {}
		}
	},
	computed: {
		apiParams() {
			return {
				...this.formatParams(),
				userName: undefined,
				parentProxyName: this.searchFormValues.userName
			}
		}
	},
	watch: {
		'expiredLogs.visible': {
			handler(val) {
				if (val) return
				this.expiredLogs.row = []
			}
		}
	},
	created() {
		const { query } = this.$route
		if (query.userType) {
			this.teamAgent = query
			this.subAgents = [{ ...query }]
		}
		const { fetchApi } = manager({
			api: async (parmas) => {
				if (this.isMember) {
					return this.$api.memberRebateRatelistApi(parmas)
				} else {
					return this.$api.rebateRateListApi(parmas)
				}
			},
			tableProps: this.tableProps, // table props
			defaultParams: this.apiParams
		})
		this.search = (params) => {
			this.listQueryParams = params
			this.isMember = parseInt(params.userType) === 0
			fetchApi({
				...params
			})
		}
	},
	methods: {
		async handleRebateEdit(row) {
			this.rebateDialog.visible = true
			this.rebateDialog.row = row
			this.rebateDialog.isEdit = true
		},
		handleCheckExpiredLogs(row) {
			this.expiredLogs.visible = true
			this.expiredLogs.row = row
		},
		refresh() {
			this.search(Object.assign({}, this.apiParams, this.listQueryParams))
		},
		handleRowCancel(row) {
			Object.keys(this.formData).forEach((k) => {
				this.formData[k] = undefined
			})
		},
		handleViewAgent(row) {
			this.showSubType = 1
			if (this.subAgents.length === 0) {
				this.teamAgent = row
			}
			this.subAgents.push(row)
			this.tableProps.pageNum = 1
			this.tableProps.pageSize = 100
			this.isMember = false
			this.search({
				parentProxyName: row.userName,
				userType: 1
			})
		},
		handleViewVip(row) {
			this.showSubType = 2
			this.teamAgent = row
			this.subAgents.push(row)
			this.isMember = true
			const params = {
				parentProxyName: row.userName,
				userType: 0
			}

			if (row.status === 2) {
				params['status'] = 2
			}
			this.tableProps.pageNum = 1
			this.tableProps.pageSize = 100
			this.search(params)
		},
		handleBack(agent, index) {
			this.tableProps.pageNum = 1
			this.tableProps.pageSize = 100
			this.isMember = false
			if (agent === undefined) {
				this.search({
					...this.formatParams()
				})
				this.showSubType = 0
				this.teamAgent = {}
				this.subAgents = []
				return
			}
			this.showSubType = agent.showSubType
			this.subAgents = this.subAgents.filter((item, _index) => {
				return _index <= index
			})
			const actionItem = this.subAgents[this.subAgents.length - 1]
			const formParams = this.formatParams()
			this.search({
				// ...this.formatParams(),
				parentProxyName:
					actionItem.userName || formParams.parentProxyName,
				userType: actionItem.showUserType || formParams.userType
			})
		},
		async filter(params) {
			this.search(params)
		},
		rowSubmitConfirm() {
			const msg =
				'确认修改返点比例后，针对待结算返点账单即刻生效。修改前返点比例将生成已失效记录。'
			const title = '确认修改返点比例'
			return this.$confirm(msg, title)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep {
	.el-form-item__error {
		white-space: nowrap;
	}
}
::v-deep .edit-number {
	.el-input-number__decrease {
		display: none;
	}
	.el-input-number__increase {
		display: none;
	}

	.el-input-number .el-input__inner {
		padding: 0;
	}

	.el-input-number {
		width: 80px;
	}
}
.subAgents {
	display: flex;
	align-items: center;
	a {
		font-size: 15px;
	}
	span {
		margin: 0 4px;
	}
}
.breadcrumb {
	display: flex;
	margin-top: 40px;
	margin-bottom: 10px;
	span {
		color: #9b9ca0;
		font-size: 14px;
	}
}
</style>
